import React from 'react';
import PropTypes from 'prop-types';
import {Card, Button, Row, Col, Table, Spin, Popconfirm, Form, message} from 'antd';
import {TABLE, FIXED_COLUMN_WIDTH, FORM_OPTIONS} from '../constants';
import {conventEnumValueToString} from '../utils';
import {agentKind, dealerExtendAuthorisedMethod, dealerExtendOnlineStatus} from '../Enum';
import WrappedDatePicker from '../common/WrappedDatePicker';
import {getDetail, updateApplyReport} from './api';
import TextInput from 'Shared/components/TextInput';
import WrappedSelect from '../common/WrappedSelect';
import routes from './routes';
import styles from './style.css';
import Return from '../common/Return';
import RegionSelect from '../common/RegionSelect';
import PersonnelSelectPanel from './PersonnelSelectPanel';
import {newOrUpdateOrderValidator} from './validator';
import {injectIntl, language} from './intl';
const FormItem = Form.Item;

const dealerExtendAuthorisedMethodToList = dealerExtendAuthorisedMethod.toList(language);
const dealerExtendOnlineStatusToList = dealerExtendOnlineStatus.toList(language);
export class UpdatePanel extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        data: {areaTiledId: []},
        isValidate: false,
        personnels: [],
        showPersonnelSelectPanel: false,
    };
    componentDidMount() {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok) {
                    const data = res.data;
                    const region = [];
                    if(data.areaId)
                        region.push(data.areaId);
                    if(data.countryId)
                        region.push(data.countryId);
                    if(data.provinceId)
                        region.push(data.provinceId);
                    if(data.cityId)
                        region.push(data.cityId);
                    data.areaTiledId = region;
                    this.setState({
                        loading: false,
                        data: res.data,
                        personnels: res.data.personnels,
                    });
                } else
                    this.setState({loading: false});
            });
    }
    componentWillUnmount() {
        this.isunmount = true;
    }
    onChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    onChanges = (value, name) => {
        const {formatMessage} = this.props.intl;
        const reg = /^[A-Z]{2}$/;
        if(!reg.test(value))
            message.warning(formatMessage({
                id: 'validator.requiedReg',
                defaultMessage: '只能输入2位大写字母'
            }));
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    onSubmit = () => {
        const data = this.state.data;
        const personnels = this.state.personnels;
        const isValid = newOrUpdateOrderValidator(data);
        if(!isValid) {
            this.setState({
                isValidate: true
            });
            return;
        }
        const condition = {
            shortCode: data.shortCode,
            areaTiledId: data.areaTiledId ? data.areaTiledId.slice(-1)[0] : null,
            contactNumber: data.contactNumber,
            fax: data.fax,
            email: data.email,
            address: data.address,
            zipCode: data.zipCode,
            groupVATNumber: data.groupVATNumber,
            partsManager: data.partsManager,
            juridicalPerson: data.juridicalPerson,
            juridicalPersonPhone: data.juridicalPersonPhone,
            juridicalPersonEmail: data.juridicalPersonEmail,
            generalManager: data.generalManager,
            generalManagerPhone: data.generalManagerPhone,
            generalManagerEmail: data.generalManagerEmail,
            salesDirector: data.salesDirector,
            salesDirectorPhone: data.salesDirectorPhone,
            salesDirectorEmail: data.salesDirectorEmail,
            serviceDirector: data.serviceDirector,
            serviceDirectorPhone: data.serviceDirectorPhone,
            serviceDirectorEmail: data.serviceDirectorEmail,
            marketDirector: data.marketDirector,
            marketDirectorPhone: data.marketDirectorPhone,
            marketDirectorEmail: data.marketDirectorEmail,
            financialController: data.financialController,
            financialControllerPhone: data.financialControllerPhone,
            financialControllerEmail: data.financialControllerEmail,
            salesInterfacePerson: data.salesInterfacePerson,
            salesInterfacePhone: data.salesInterfacePhone,
            salesInterfaceEmail: data.salesInterfaceEmail,
            serviceInterfacePerson: data.serviceInterfacePerson,
            serviceInterfacePhone: data.serviceInterfacePhone,
            serviceInterfaceEmail: data.serviceInterfaceEmail,
            incorporatedDate: data.incorporatedDate,
            startTime: data.startTime,
            authorisedMethod: data.authorisedMethod,
            authorisedArea: data.authorisedArea,
            arrivedAddress: data.arrivedAddress,
            openDate: data.openDate,
            onlineStatus: data.onlineStatus,
            updatedDate: data.updatedDate,
            rowVersion: data.rowVersion,
            personnels: personnels.map(v => ({
                id: v.id,
            }))
        };
        this.props.onSubmit(condition)
            .then(() => {
                if(!this.isunmount)
                    this.setState({loading: false});
            });
    }
    onClosePersonnelSelectPanel = () => {
        this.setState({showPersonnelSelectPanel: false});
    }
    onSelectPersonnel = value => {
        const personnels = this.state.personnels;
        value.map(p => {
            const detail = this.state.personnels.find(d => d.id === p.id);
            if(!detail) {
                const detail = {
                    id: p.id,
                    userName: p.userName,
                    name: p.name,
                };
                personnels.push(detail);
            }
            return p;
        });
        this.setState({
            showPersonnelSelectPanel: false,
            hasOperat: true,
            personnels
        });
    }
    onClickAddPersonnelBtn = () => {
        this.setState({showPersonnelSelectPanel: true});
    }
    onPersonnelDeleteAll = () => {
        this.setState({
            personnels: [],
            hasOperat: true
        });
    }
    onPersonnelDeleteDetail = e => {
        const id = e.target.dataset.id;
        const personnels = this.state.personnels.filter(p => p.id !== id);
        this.setState({
            personnels,
            hasOperat: true
        });
    }
    onClickOkOnPopconfirm = () => {
        this.props.onCancel();
    }
    render() {
        const reg = /^[A-Z]{2}$/;
        const data = this.state.data;
        const validateAddress = (data.address && data.address.length > 300) && this.state.isValidate ? 'error' : null;
        const {formatMessage} = this.props.intl;
        const personnels = this.state.personnels;
        const regionSelectDefaultOption = {
            areaId: data.areaId,
            areaName: data.areaName,
            countryId: data.countryId,
            countryName: data.countryName,
            provinceId: data.provinceId,
            provinceName: data.provinceName,
            cityId: data.cityId,
            cityName: data.cityName,
        };
        const personnelColumns = [{
            title: formatMessage({
                id: 'updatePanel.column.userName',
                defaultMessage: '编号'
            }),
            dataIndex: 'userName',
        }, {
            title: formatMessage({
                id: 'updatePanel.column.name',
                defaultMessage: '姓名'
            }),
            dataIndex: 'name',
        }, {
            title: personnels.length > 0
                ? (
                    <Popconfirm placement="topRight" title={formatMessage({
                        id: 'updatePanel.validation.isDelete',
                        defaultMessage: '是否确认全部删除？'
                    })} onConfirm={this.onPersonnelDeleteAll} >
                        <a>{formatMessage({
                            id: 'updatePanel.validation.clear',
                            defaultMessage: '清空'
                        })}</a>
                    </Popconfirm>
                )
                : null,
            dataIndex: 'id',
            fixed: 'right',
            width: FIXED_COLUMN_WIDTH,
            render: text => <a data-id={text} onClick={this.onPersonnelDeleteDetail}>{formatMessage({
                id: 'updatePanel.validation.delete',
                defaultMessage: '删除'
            })}</a>
        }];
        return (
            <div className="form-standard">
                <Spin spinning={this.state.loading}>
                    <Card title={formatMessage({
                        id: 'updatePanel.column.basicInformation',
                        defaultMessage: '基础信息'
                    })}>
                        <Form>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.code',
                                        defaultMessage: '编号'
                                    })} {...FORM_OPTIONS.item} >
                                        {data.code}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.name',
                                        defaultMessage: '名称'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.name}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.shortCode',
                                        defaultMessage: '简码'
                                    // eslint-disable-next-line no-negated-condition
                                    })} {...FORM_OPTIONS.item} validateStatus={!reg.test(data.shortCode) ? 'error' : null} required>
                                        <TextInput
                                            name="shortCode"
                                            value={data.shortCode}
                                            onBlur={this.onChanges} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.shortName',
                                        defaultMessage: '简称'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.shortName}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.kind',
                                        defaultMessage: '客户分类'
                                    })} {...FORM_OPTIONS.item} >
                                        {conventEnumValueToString(agentKind, data.kind)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.areaTiledId',
                                        defaultMessage: '国省市'
                                    })} {...FORM_OPTIONS.item}>
                                        <RegionSelect
                                            name="areaTiledId"
                                            defaultOption={regionSelectDefaultOption}
                                            value={data.areaTiledId}
                                            onChange={this.onChange}
                                            changeOnSelect={true} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.contactNumber',
                                        defaultMessage: '联系电话'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="contactNumber"
                                            value={data.contactNumber}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.fax',
                                        defaultMessage: '传真'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="fax"
                                            value={data.fax}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.email',
                                        defaultMessage: '电子邮件'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="email"
                                            value={data.email}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.address',
                                        defaultMessage: '联系地址'
                                    })} {...FORM_OPTIONS.item} validateStatus={validateAddress}>
                                        <TextInput
                                            name="address"
                                            value={data.address}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.zipCode',
                                        defaultMessage: '邮政编码'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="zipCode"
                                            value={data.zipCode}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.groupVATNumber',
                                        defaultMessage: '集团增值税编号'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="groupVATNumber"
                                            value={data.groupVATNumber}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.partsManager',
                                        defaultMessage: '备件经理'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="partsManager"
                                            value={data.partsManager}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                    <Card title={formatMessage({
                        id: 'updatePanel.column.extendInformation',
                        defaultMessage: '扩展信息'
                    })}>
                        <Form>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.juridicalPerson',
                                        defaultMessage: '法人'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="juridicalPerson"
                                            value={data.juridicalPerson}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.juridicalPersonPhone',
                                        defaultMessage: '法人电话'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="juridicalPersonPhone"
                                            value={data.juridicalPersonPhone}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.juridicalPersonEmail',
                                        defaultMessage: '法人Email'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="juridicalPersonEmail"
                                            value={data.juridicalPersonEmail}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.generalManager',
                                        defaultMessage: '总经理'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="generalManager"
                                            value={data.generalManager}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.generalManagerPhone',
                                        defaultMessage: '总经理电话'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="generalManagerPhone"
                                            value={data.generalManagerPhone}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.generalManagerEmail',
                                        defaultMessage: '总经理Email'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="generalManagerEmail"
                                            value={data.generalManagerEmail}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.salesDirector',
                                        defaultMessage: '销售总监'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="salesDirector"
                                            value={data.salesDirector}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.salesDirectorPhone',
                                        defaultMessage: '销售总监电话'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="salesDirectorPhone"
                                            value={data.salesDirectorPhone}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.salesDirectorEmail',
                                        defaultMessage: '销售总监Email'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="salesDirectorEmail"
                                            value={data.salesDirectorEmail}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.serviceDirector',
                                        defaultMessage: '服务总监'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="serviceDirector"
                                            value={data.serviceDirector}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.serviceDirectorPhone',
                                        defaultMessage: '服务总监电话'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="serviceDirectorPhone"
                                            value={data.serviceDirectorPhone}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.serviceDirectorEmail',
                                        defaultMessage: '服务总监Email'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="serviceDirectorEmail"
                                            value={data.serviceDirectorEmail}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.marketDirector',
                                        defaultMessage: '市场总监'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="marketDirector"
                                            value={data.marketDirector}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.marketDirectorPhone',
                                        defaultMessage: '市场总监电话'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="marketDirectorPhone"
                                            value={data.marketDirectorPhone}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.marketDirectorEmail',
                                        defaultMessage: '市场总监Email'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="marketDirectorEmail"
                                            value={data.marketDirectorEmail}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.financialController',
                                        defaultMessage: '财务总监'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="financialController"
                                            value={data.financialController}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.financialControllerPhone',
                                        defaultMessage: '财务总监电话'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="financialControllerPhone"
                                            value={data.financialControllerPhone}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.financialControllerEmail',
                                        defaultMessage: '财务总监Email'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="financialControllerEmail"
                                            value={data.financialControllerEmail}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'updatePanel.operation.salesInterfacePerson',
                                        defaultMessage: '销售接口录入人'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="salesInterfacePerson"
                                            value={data.salesInterfacePerson}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'updatePanel.operation.salesInterfacePhone',
                                        defaultMessage: '销售接口录入人电话'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="salesInterfacePhone"
                                            value={data.salesInterfacePhone}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'updatePanel.operation.salesInterfaceEmail',
                                        defaultMessage: '销售接口录入人邮箱'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="salesInterfaceEmail"
                                            value={data.salesInterfaceEmail}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'updatePanel.operation.serviceInterfacePerson',
                                        defaultMessage: '服务接口录入人'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="serviceInterfacePerson"
                                            value={data.serviceInterfacePerson}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'updatePanel.operation.serviceInterfacePhone',
                                        defaultMessage: '服务接口录入人电话'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="serviceInterfacePhone"
                                            value={data.serviceInterfacePhone}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'updatePanel.operation.serviceInterfaceEmail',
                                        defaultMessage: '服务接口录入人邮箱'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="serviceInterfaceEmail"
                                            value={data.serviceInterfaceEmail}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'updatePanel.operation.incorporatedDate',
                                        defaultMessage: '公司成立日期'
                                    })} {...FORM_OPTIONS.item}>
                                        <WrappedDatePicker
                                            name="incorporatedDate"
                                            value={data.incorporatedDate}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'updatePanel.operation.startTime',
                                        defaultMessage: '授权经营奇瑞起始时时间'
                                    })} {...FORM_OPTIONS.item} >
                                        <WrappedDatePicker
                                            name="startTime"
                                            value={data.startTime}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.authorisedMethod',
                                        defaultMessage: '授权方式'
                                    })} {...FORM_OPTIONS.item}>
                                        <WrappedSelect
                                            allowClear
                                            name="authorisedMethod"
                                            options={dealerExtendAuthorisedMethodToList}
                                            value={data.authorisedMethod}
                                            onChange={this.onChange}/>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.authorisedArea',
                                        defaultMessage: '授权区域'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="authorisedArea"
                                            value={data.authorisedArea}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.arrivedAddress',
                                        defaultMessage: '收货港'
                                    })} {...FORM_OPTIONS.item} >
                                        <TextInput
                                            name="arrivedAddress"
                                            value={data.arrivedAddress}
                                            onBlur={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.openDate',
                                        defaultMessage: '开业日期'
                                    })} {...FORM_OPTIONS.item}>
                                        <WrappedDatePicker
                                            name="openDate"
                                            value={data.openDate}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.onlineStatus',
                                        defaultMessage: '上线状态'
                                    })} {...FORM_OPTIONS.item}>
                                        <WrappedSelect
                                            allowClear
                                            name="onlineStatus"
                                            options={dealerExtendOnlineStatusToList}
                                            value={data.onlineStatus}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'updatePanel.operation.updatedDate',
                                        defaultMessage: '更新日期'
                                    })} {...FORM_OPTIONS.item} >
                                        <WrappedDatePicker
                                            name="updatedDate"
                                            value={data.updatedDate}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                    <Card
                        title={formatMessage({
                            id: 'updatePanel.table.personnelDetails',
                            defaultMessage: '人员清单'
                        })}
                        extra={<div>
                            <Button
                                size="small"
                                onClick={this.onClickAddPersonnelBtn}>
                                {formatMessage({
                                    id: 'updatePanel.operation.newPersonnelDetail',
                                    defaultMessage: '新增人员清单'
                                })}
                            </Button>
                        </div>}>
                        <Table
                            className="white-space-nowrap"
                            columns={personnelColumns}
                            rowKey="id"
                            pagination={false}
                            dataSource={personnels}
                            {...TABLE} />
                    </Card>
                    <Card className={styles.optionBtn}>
                        <Button
                            type="primary"
                            onClick={this.onSubmit}
                            loading={this.state.loading}>
                            {formatMessage({
                                id: 'updatePanel.btn.onSubmit',
                                defaultMessage: '保存'
                            })}
                        </Button>
                    </Card>
                    {
                        this.state.showPersonnelSelectPanel &&
                    <PersonnelSelectPanel
                        selectKey={data.id}
                        onCancel={this.onClosePersonnelSelectPanel}
                        onSelect={this.onSelectPersonnel} />
                    }
                </Spin>
                <div className="page-toolbar">
                    <Return
                        disabled={this.state.loading}
                        onConfirm={this.onClickOkOnPopconfirm}
                        showWarning={this.state.hasOperat} />
                </div>
            </div>
        );
    }
}

UpdatePanel.propTypes = {
    id: PropTypes.string.isRequired,
    loading: PropTypes.bool.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
};

import {connect} from 'react-redux';
import {tableSearch} from './actions';

const mapStateToProps = state => ({
    loading: state.getIn(['page', 'domainData', 'detail', 'isFetching']),
});
const mapDispatchToProps = (dispatch, props) => ({
    onSubmit: data => updateApplyReport(props.id, data).then(result => {
        if(result.ok) {
            props.history.push(routes.query.url());
            dispatch(tableSearch());
        }
    }),
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(UpdatePanel));
